<template>
  <view id="user">
    <!-- 头像区域 -->
    <view class="user-top">
      <!-- 头部 -->
      <view class="header" :style="headerStyle">
        <view :style="'height: ' + statusBarHeight"> </view>
        <view class="header-info">
          <view class="title" :style="headerTextStyle">
            <view class="navleft">
              <view class="navposition">
                安全退出
              </view>
            </view>
            <view class="navright">
              <image src="../../static/user/userTwent.png" mode="" class="navright-imgone"></image>
              <image src="../../static/user/userTen.png" mode="" class="navright-imgtwo"></image>
              <image src="../../static/user/userFrou.png" mode="" class="navright-imgtwo"></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 头部 -->
      <!-- 头像 -->
      <view class="head-sculpture">
        <view class="headleft">
          <view class="headleft-img">
            <image src="../../static/user/userNice.png" mode="" class="headimg"></image>
          </view>
          <view class="headleft-con">
            建设银行
          </view>
        </view>
        <view class="headright">
          <view class="lasttime">
            上次登录
          </view>
          <view class="time">
            2023/04/11/16:45:21
          </view>
        </view>
      </view>
      <!-- 头像 -->
      <!-- 银行卡 -->
      <view class="card">
        <view class="bank-card">
          <view class="bankimage">
            <image src="../../static/user/userOne.png" mode="" class="bankimg"></image>
          </view>
          <view class="text">
            银行卡<text>3</text>张
          </view>
        </view>
        <view class="wait">
          <view class="bankimage">
            <image src="../../static/user/userOne.png" mode="" class="bankimg"></image>
          </view>
          <view class="text">
            待办<text>3</text>条
          </view>
        </view>
      </view>
      <!-- 银行卡 -->
      <!-- 会员中心 -->
      <view class="member">
        <view class="text">
          会员中心
        </view>
        <view class="memberimg">
          <image src="../../static/user/userShree.png" mode="" class="image"></image>
        </view>
      </view>
      <!-- 会员中心 -->

    </view>
    <!-- 头像区域 -->
    <!-- 其他区域 -->
    <view class="user-con">
      <!-- 金刚区 -->
      <view class="menu">
        <view class="grid">
          <u-grid :border="false" col="4">
            <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
              <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="26"></u-icon>
              <text class="grid-text">{{listItem.title}}</text>
            </u-grid-item>
          </u-grid>
          <!-- <u-toast ref="uToast" /> -->
        </view>
      </view>
      <!-- 金刚区 -->
      <!-- 权益中心 -->
      <view class="EquityCenter">
        <view class="preferential-top">
          <view class="preferential-title">
            权益中心
          </view>
          <view class="preferential-more">
            更多
          </view>
        </view>
        <view class="EquityCenter-con">
          <view class="EquityCenter-flex">
            <view class="EquityCenter-for" v-for="(item,i) in EquityCenterList" :key="i">
              <view class="number">
                {{item.number}}
              </view>
              <view class="text">
                {{item.text}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 权益中心 -->
      <!-- 我的资产 -->
      <view class="property">
        <view class="property-top">
          <view class="text">
            我的资产
          </view>
          <view class="propertyTopimg">
            <image src="../../static/index/eye.png" class="image" mode=""></image>
          </view>
        </view>
        <view class="property-con">
          <view class="text">
            总资产
          </view>
          <view class="number">
            ￥<text>66.66</text>
          </view>
        </view>
      </view>
      <!-- 我的资产 -->
      <!-- 我的信用卡 -->
      <view class="CreditCard">
        <view class="CreditCard-left">
          <view class="title">
            我的信用卡
          </view>
          <view class="text">
            办卡享好礼权益多多

          </view>
        </view>
        <view class="CreditCard-right">
          <view class="text">
            立即申请
          </view>
        </view>
      </view>
      <!-- 我的信用卡 -->
      <!-- 我的贷款 -->
      <view class="Myloan">
        <view class="Myloan-top">
          <view class="title">
            我的贷款
          </view>
        </view>
        <view class="Myloan-con">
          <view class="CreditCard-left">
            <view class="title">
              快贷
            </view>
            <view class="text">
              全流程线上办理极速审批用时起息
            </view>
          </view>
          <view class="CreditCard-right">
            <view class="text">
              立即申请
            </view>
          </view>
        </view>
      </view>
      <!-- 我的贷款 -->
      <!-- 常用服务 -->
      <view class="Services">
        <view class="preferential-top">
          <view class="preferential-title">
            常用服务
          </view>
          <view class="preferential-more">
            更多
          </view>
        </view>
        <view class="Services-con">
          <view class="Services-left">
            <view class="Services-left-flex">
              <view class="Services-for" v-for="(item,i) in ServicesList" :key="i">
                <view class="write">
                  <view class="title">
                    {{item.title}}
                  </view>
                  <view class="text">
                    {{item.text}}
                  </view>
                </view>
                <view class="image">
                  <image :src="item.img" class="img" mode=""></image>
                </view>
              </view>
            </view>
          </view>
          <view class="Services-right">
            <view class="Services-right-flex">
              <view class="title">
                电子社保卡
              </view>
              <view class="text">
                社保卡的电子凭证
              </view>
              <view class="button">
                <view class="text1">
                  前往
                </view>
                <view class="image">
                  <image src="../../static/user/userarrows.jpg" class="img" mode=""></image>
                </view>
              </view>
            </view>
            <view class="Services-right-flex">
              <view class="title">
                电子社保卡
              </view>
              <view class="text">
                社保卡的电子凭证
              </view>
              <view class="button">
                <view class="text1">
                  前往
                </view>
                <view class="image">
                  <image src="../../static/user/userarrows.jpg" class="img" mode=""></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 常用服务 -->
      <!-- 劳动者港湾 -->
      <view class="labourer">
        <view class="preferential-top">
          <view class="preferential-title">
            常用服务
          </view>
          <view class="preferential-more">
            详情
          </view>
        </view>
        <view class="labourer-con">
          <view class="labourer-flex">
            <view class="left">
              <image src="../../static/user/servefour.png" mode="" class="img"></image>
            </view>
            <view class="right">
              <view class="title">
                您身心可以停靠的地方
              </view>
              <view class="text">
                索了能歌脚渴了能圜水没电能充电饭凉能加热
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 劳动者港湾 -->
      <!-- 广告 -->
      <view class="advertisement">
        <image src="../../static/user/userbg.jpg" class="img" mode=""></image>
      </view>
      <!-- 广告 -->
      <!-- 我的设置 -->
      <view class="Myettings">
        <view class="preferential-top">
          <view class="preferential-title">
            我的设置
          </view>
          <view class="preferential-more">
            更多
          </view>
        </view>
        <view class="Myettings-con">
          <view class="grid1">
            <u-grid :border="false" col="4">
              <u-grid-item v-for="(listItem,i) in list1" :key="i">
                <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="26"></u-icon>
                <text class="grid-text">{{listItem.title}}</text>
              </u-grid-item>
            </u-grid>
          </view>
        </view>
      </view>
      <!-- 我的设置 -->
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        appData: {},
        headerData: {
          bgColor: "",
          textColor: "",
        },
        list: [{
            name: '/static/user/userSix.png',
            title: '每日签到'
          },
          {
            name: '/static/user/userEnen.png',
            title: '会员礼包'
          },
          {
            name: '/static/user/userDd.png',
            title: '会员任务'
          },
          {
            name: '/static/user/userCc.png',
            title: '会员权益'
          },
        ],
        EquityCenterList: [{
          number: "3001",
          text: "综合积分"
        }, {
          number: "0",
          text: "我的优惠券"
        }, {
          number: "0",
          text: "信用卡权益"
        }, ],
        ServicesList: [{
            title: "住房公积金",
            text: "信息查询业务办理",
            img: "/static/user/serveone.png"
          },
          {
            title: "个人养老金",
            text: "税收优惠投资便捷",
            img: "/static/user/serveTwo.png"
          }, {
            title: "企业年金",
            text: "余额明细便捷查询",
            img: "/static/user/serveshree.png"
          },
        ],
        list1: [{
            name: '/static/user/user1.jpg',
            title: '限额设置'
          },
          {
            name: '/static/user/user2.jpg',
            title: '一键绑卡'
          },
          {
            name: '/static/user/user3.jpg',
            title: '绑定设备'
          },
          {
            name: '/static/user/user4.jpg',
            title: '绑定微信'
          },
        ],

      }
    },

    computed: {
      navigationBarHeight() {
        return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
      },
      statusBarHeight() {
        return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
      },
      headerStyle() {
        return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
      },
      headerTextStyle() {
        return `color:${this.headerData.textColor}`
      },
    },
    onShow() {
      const res = uni.getSystemInfoSync()
      this.appData = res;
    },
    methods: {
      onPageScroll(e) {
        if (e.scrollTop >= this.appData.statusBarHeight) {
          this.headerData.bgColor = '#fff'
          this.headerData.textColor = '#000'
        } else {
          this.headerData.bgColor = ''
          this.headerData.textColor = ''
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #eee;
  }

  #user {
    width: 100vw;
    background-color: #eee;
  }

  // 头部
  .header {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    transition: all .5s;
    background: rgba(255, 255, 255, 0);

    .header-info {
      height: 88rpx;
      margin-top: 30rpx;

      .title {
        display: flex;
        justify-content: space-between;
        width: 100vw;
        padding: 0 35rpx;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        transition: all .5s;

        .navleft {
          display: flex;
          width: 25vw;
          height: 50rpx;

          .navleft-img {
            padding: 10rpx 0;
            width: 20rpx;
            height: 30rpx;
          }

          .navposition {
            color: #000;
            font-weight: 520;
            font-size: 38rpx;
            padding-left: 8rpx;
            border: none;
          }
        }

        .navcent {
          width: 50vw;
          height: 50rpx;
        }

        .navright {
          display: flex;
          justify-content: space-around;
          width: 28vw;
          height: 50rpx;

          .navright-imgone {
            width: 50rpx;
            height: 50rpx;
          }

          .navright-imgtwo {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }

    }
  }

  // 头部
  // <!-- 头像区域 -->
  .user-top {
    padding-top: 40rpx;
    width: 100vw;
    height: 40vh;
    background-image: linear-gradient(to bottom right, #F6F7FB, #D5D7F0);
    // background-color: #;
    margin-bottom: 130rpx;
  }

  .head-sculpture {
    width: 90%;
    padding-top: 130rpx;
    margin: auto;
    display: flex;
    justify-content: space-between;
    // border: 1px solid #000;
    // padding: auto;
    margin-left: 5%;

    .headleft {
      display: flex;

      .headleft-img {
        margin-right: 20rpx;

        .headimg {
          width: 18vw;
          height: 10vh;
        }
      }

      .headleft-con {
        font-size: 40rpx;
        font-weight: bold;
        line-height: 10vh;
      }
    }

    .headright {
      line-height: 4vh;

      .lasttime {
        font-size: 30rpx;
        text-align: right;
        // margin-bottom: 10rpx;
      }

      .time {
        font-size: 30rpx;
      }
    }
  }

  // <!-- 银行卡 -->
  .card {
    width: 90vw;
    margin: auto;
    background: #CED3E6;
    margin-top: 30rpx;
    // padding: 20rpx 0;
    display: flex;
    border-radius: 10rpx;
    padding: 20rpx 10%;
    box-sizing: border-box;

    .bank-card {
      display: flex;
      border-right: 2px solid #666;
      width: 50%;

      .bankimage {
        margin-top: 5rpx;
        margin-right: 10rpx;
        // width: 10%;

        .bankimg {
          width: 5vw;
          height: 2vh;
        }
      }

      .text {
        font-size: 30rpx;
      }

      .text text {
        padding: 0 10rpx;
        font-size: 35rpx;
        font-weight: bold;
      }
    }

    .wait {
      width: 50%;
      display: flex;
      justify-content: center;
      // padding-left: 10%;

      .bankimage {
        margin-top: 5rpx;
        margin-right: 10rpx;
        // width: 10%;

        .bankimg {
          width: 5vw;
          height: 2vh;
        }
      }

      .text {
        font-size: 30rpx;
      }

      .text text {
        padding: 0 10rpx;
        font-size: 35rpx;
        font-weight: bold;
      }
    }
  }

  // <!-- 银行卡 -->
  // <!-- 会员中心 -->
  .member {
    width: 90vw;
    height: 7vh;
    margin: auto;
    border-radius: 10rpx;
    margin-top: 30rpx;
    background-image: linear-gradient(to bottom right, #FAF4D7, #EDC487);
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .text {
      width: 30%;
      font-size: 35rpx;
      line-height: 7vh;
      text-align: center;
      font-weight: bold;
    }

    .memberimg {
      width: 20%;

      .image {
        width: 15vw;
        height: 7vh;
      }
    }
  }

  // <!-- 会员中心 -->
  // <!-- 头像区域 -->
  .user-con {
    background-color: #eee;
    position: relative;
    background-color: #eee;
  }

  // <!-- 金刚区 -->
  .grid {
    position: absolute;
    left: 5%;
    top: -155rpx;
    width: 90vw;
    margin: 0 auto 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 15rpx 5rpx;

    .grid-text {
      // text-align: center;
      margin-top: 10rpx;
      font-size: 20rpx;
    }
  }


  // <!-- 金刚区 -->
  // <!-- 权益中心 -->
  .EquityCenter {
    // padding-top: 150rpx;
    width: 90vw;
    background-color: #fff;
    margin: auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

  }

  .EquityCenter-flex {
    display: flex;
    justify-content: space-between;
    text-align: center;

    .number {
      font-size: 35rpx;
      font-weight: bold;
    }

    .text {
      margin-top: 10rpx;
      font-size: 25rpx;
    }
  }

  .preferential-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .preferential-title {
      font-size: 35rpx;
      font-weight: bold;
    }

    .preferential-more {
      font-size: 28rpx;
      color: #ccc;
    }
  }

  // <!-- 权益中心 -->
  // <!-- 我的资产 -->
  .property {
    width: 90vw;
    background-color: #fff;
    margin: auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    // position: absolute;
    // left: 5%;
    // margin-top: 340rpx;
    margin-top: 20rpx;

    .property-top {
      display: flex;

      .text {
        font-size: 35rpx;
        font-weight: bold;
      }

      .propertyTopimg {
        margin-left: 15rpx;
        margin-top: 5rpx;

        .image {
          width: 5vw;
          height: 2vh;
        }
      }
    }

    .property-con {
      .text {
        font-size: 25rpx;
        margin: 15rpx 0;
      }

      .number {
        font-size: 25rpx;
        font-weight: bold;

        text {
          font-size: 40rpx;
        }
      }
    }
  }

  // <!-- 我的资产 -->
  // <!-- 我的信用卡 -->
  .CreditCard {
    // margin-top: 20rpx;
    width: 90vw;
    background-color: #fff;
    margin: 20rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-between;

    .CreditCard-left {
      .title {
        font-size: 35rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }

      .text {
        color: #666;
        font-size: 30 rpx;
      }
    }

    .CreditCard-right {
      display: flex;
      align-items: center;

      .text {
        padding: 10rpx 20rpx;
        background: #283AC1;
        color: #fff;
        border-radius: 30rpx;
        font-size: 30rpx;
        // margin: auto 0;
        // vertical-align: middle;

      }

    }
  }

  // <!-- 我的信用卡 -->
  // <!-- 我的贷款 -->
  .Myloan {
    width: 90vw;
    background-color: #fff;
    margin: 20rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .Myloan-top {
      .title {
        font-size: 35rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
      }
    }

    .Myloan-con {
      display: flex;
      justify-content: space-between;

      .CreditCard-left {
        .title {
          font-size: 33rpx;
          font-weight: bold;
          margin-bottom: 20rpx;
        }

        .text {
          color: #666;
          font-size: 28rpx;
        }
      }

      .CreditCard-right {
        display: flex;
        align-items: center;

        .text {
          padding: 10rpx 20rpx;
          background: #283AC1;
          color: #fff;
          border-radius: 30rpx;
          font-size: 30rpx;
          // margin: auto 0;
          // vertical-align: middle;

        }

      }
    }
  }

  // <!-- 我的贷款 -->
  // <!-- 常用服务 -->
  .Services {
    width: 90vw;
    background-color: #fff;
    margin: 20rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    margin-bottom: 30rpx;

    .Services-con {
      display: flex;

      justify-content: space-between;

      .Services-left {
        width: 48%;

        .Services-left-flex {

          // display: flex;
          // justify-content: space-between;
          .Services-for {
            padding: 20rpx;
            background-color: #F8F9FD;
            position: relative;
            margin-bottom: 6rpx;
          }

          .write {
            .title {
              font-size: 30rpx;
              font-weight: bold;
              margin-bottom: 5rpx;
            }

            .text {
              font-size: 24rpx;
              color: #666;
            }
          }

          .image {
            position: absolute;
            top: 50rpx;
            left: 220rpx;

            .img {
              width: 10vw;
              height: 5vh;
            }
          }
        }
      }

      .Services-right {
        width: 48%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;

        .Services-right-flex {
          width: 100%;
          background-color: #F8F9FD;
          padding: 20rpx;
          border-radius: 10rpx;

          .title {
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .text {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 15rpx;

          }

          .button {
            display: flex;
            justify-content: center;
            width: 40%;
            // padding: rpx;
            border-radius: 25rpx;
            // text-align: center;
            background-color: #283BBA;

            .text1 {
              color: #fff;
              font-size: 24rpx;
            }

            .image {
              margin-left: 5rpx;

              .img {
                width: 3vw;
                height: 2vh;
              }
            }
          }
        }
      }
    }
  }

  // <!-- 常用服务 -->
  // <!-- 劳动者港湾 -->
  .labourer {
    width: 90vw;
    background-color: #fff;
    margin: 20rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
  }

  .labourer-con {
    .labourer-flex {
      background-color: #F4F7FF;
      padding: 10rpx;
      border-radius: 15rpx;
      display: flex;
      align-items: center;

      .left {
        padding: 0rpx 20rpx;

        .img {
          width: 10vw;
          height: 5vh;
        }
      }

      .right {
        .title {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .text {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 15rpx;

        }
      }
    }
  }

  // <!-- 劳动者港湾 -->
  // <!-- 广告 -->
  .advertisement {
    width: 90vw;
    margin: auto;
    margin-bottom: 30rpx;

    .img {
      width: 90vw;
      height: 10vh;
    }
  }

  // <!-- 广告 -->
  // <!-- 我的设置 -->
  .Myettings {
    width: 90vw;
    background-color: #fff;
    margin: 20rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    margin-bottom: 30rpx;

    .grid1 {
      // width: 90vw;
      margin: 0 auto 30rpx;
      background-color: #fff;
      border-radius: 10rpx;
      box-sizing: border-box;
      padding: 15rpx 5rpx;

      .grid-text {
        // text-align: center;
        margin-top: 10rpx;
        font-size: 20rpx;
      }
    }
  }

  // <!-- 我的设置 -->
</style>